<template>
	<view>
		<view class="flex" style="position: relative;">
			<view class="flex-item" @click="current = 0" :class="current==0?'bg1':'bg2'">
				<text :class="current==0?'':'text-color'">级别礼包</text>
			</view>
			<!-- <view class="flex-item" @click="current = 1" :class="current==1?'bg1':'bg2'">
				<text :class="current==1?'':'text-color'">消费礼包</text>
			</view>
			<view class="border" :class="current==0?'':'border-right'"></view> -->
		</view>
		<view class="bg1 pdd">
			<view class="flex boxs pdd">
				<view>
					<image :src="userinfo.headimg" mode="widthFix" class="flex" style="width: 80upx;height: 80upx;"></image>
				</view>
				<view class="flex-1" style="padding-left: 20upx;">
					<view class="white-color">{{userinfo.nickname}}</view>
					<view class="tags">
						{{userinfo.explain}}
					</view>
				</view>
				<view style="text-align: center;" v-show="current == 0">
					<view class="flex" style="justify-content: center;">
						<image src="/static/giftpack/jh.png" mode="widthFix" class="flex" style="width: 60upx;"></image>
					</view>
					
					<view class="white-color" style="margin-top: 10upx;font-size: 22upx;">
						等级激活
					</view>
				</view>
			</view>
		</view>	
		<view v-if="current == 0">
			<view class="bg1 pdd" style="margin-top: 30upx;" v-if="userinfo.saaslevel >= 2">
				<view class="text-color">
					级别礼包
				</view>
				<view style="margin-top: 30upx;position: relative;">
					<image src="/static/giftpack/banner@2x.png" mode="widthFix" class="flex" style="width: 100%;"></image>
					<view class="white-color" style="position: absolute;font-size: 50upx;font-weight: bold;left: 40upx;bottom:30upx">
						<text style="font-size: 30upx;">¥</text>{{box_info.price}}
					</view>
				</view>
				<view style="margin-top: 20upx;"> 
					<progress :percent="box_info.process" show-info stroke-width="10" :border-radius="20" activeColor="#9250E7" backgroundColor="#efefefef"/>
				</view>
				<view class="text-color" style="text-align: center;font-size: 26upx;">
					完成{{box_info.price}}PV
				</view>
				<view style="margin-top: 30upx;">
					<button v-if="userinfo.saas_jihuo == 2" type="primary" class="main-bg" style="border-radius: 60upx 60upx;" @tap="levelActivate" ><text class="white-color" style="font-size: 30upx;">点击激活</text></button>
					<button v-if="userinfo.saas_jihuo == 1" type="primary" class="main-bg" style="border-radius: 60upx 60upx;" ><text class="white-color" style="font-size: 30upx;">已激活</text></button>
				</view>
			</view>
			<view class="pdd bg1" style="margin-top: 30upx;" v-if="userinfo.saaslevel >= 2">
				<view style="text-align: center;" class="text-color">
					<text>-</text>
					<text style="padding: 0 20upx;">礼包介绍</text>
					<text style="margin-top: 10upxs;" v-html="box_info.shuoming">-</text>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="bg1 pdd" style="margin-top: 30upx;">
				<view class="text-color">
					选择消费礼包
				</view>
				<!-- 礼包 -->
				<view>
					<swiper
						class="u-swiper__wrapper"
						previousMargin="90px"
						nextMargin="90px"
						circular
						:current="swiperIndex"
						@change="wiperChange"
					>
						<swiper-item class="u-swiper__wrapper__item" v-for="(item,index) in scorelist" :key="index">
							<view class="swiper-item-boxs" :class="index != swiperIndex?'scale':''">
								<view>
									<view style="display: flex;align-items: center;justify-content: center;">
										<image src="../../static/giftpack/gift.png" mode="widthFix" class="flex" style="width: 200upx;"></image>
									</view>
									<view class="color1" style="font-size: 30upx;font-weight: bold;margin-top: 30upx;">
										{{item.title}}
									</view>
								</view>
								
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view style="text-align: center;" class="text-color">
					<text>-</text>
					<text style="padding: 0 20upx;">礼包介绍</text>
					<text>-</text>
				</view>
				<view style="font-size: 24upx;margin-top: 20upx;text-align: center;">
					<view v-html="scorelist[swiperIndex].shuoming">
						
					</view>
					
				</view>
				<block v-if="userinfo.xiaofei_jihuo == 0">
					<view class="bg3" style="padding: 20upx 20upx;border-radius: 10upx 10upx;margin-top: 20upx;">
						<input type="text" v-model="name" placeholder="姓名:" placeholder-style="color:#333;font-size:28upx">
					</view>
					<view class="bg3" style="padding: 20upx 20upx;border-radius: 10upx 10upx;margin-top: 20upx;">
						<input type="text" v-model="tel" placeholder="电话:" placeholder-style="color:#333;font-size:28upx">
					</view>
					<view class="bg3" style="padding: 20upx 20upx;border-radius: 10upx 10upx;margin-top: 20upx;">
						<input type="text" v-model="address" placeholder="收货地址:" placeholder-style="color:#333;font-size:28upx">
					</view>
					<view style="margin-top: 40upx;">
						<button type="primary" class="main-bg" style="border-radius: 60upx 60upx;" @tap="consumeBox">
							<text class="white-color" style="font-size: 30upx;">收入囊中</text>
						</button>
					</view>
				</block>
				<block v-if="userinfo.xiaofei_jihuo == 1">
					<view style="margin-top: 40upx;">
						<button type="primary" class="main-bg" style="border-radius: 60upx 60upx;">
							<text class="white-color" style="font-size: 30upx;">您已购买</text>
						</button>
					</view>
				</block>
			</view>	
			
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				name:'',
				tel:'',
				address:'',
				current:0,
				swiperIndex:0,
				opt:{},
				loading:false,
				isload: false,
			
				userinfo: [],
				scorelist:[],
				box_info:[],
				sysset: [],
				xfbox:0,
			};
		},
		onLoad: function (opt) {
				this.opt = app.getopts(opt);
				if(this.opt.token != undefined){
					this.setlogin();
				}else{
					this.getdata();
				}
				
		},
			onPullDownRefresh: function () {
				this.getdata();
			},
		methods:{
			wiperChange(e){
				this.swiperIndex = e.detail.current
			},
			setlogin:function(){
				var that = this;
				app.post("ApiIndex/logintogether", {gtksession:that.opt.token}, function (res) {
					that.getdata();
				});
			},
			getdata: function () {
				var that = this;
				that.loading = true;
				app.post('ApiMy/getMemberSaasLevelInfo', {id:that.opt.id}, function (res) {
					that.loading = false;
					if (res.userinfo) {
						that.userinfo = res.userinfo;
						that.scorelist = res.score_list;
						that.box_info = res.box_info;
						that.show = true;
					}
					that.loaded();
				});
			},
			levelActivate:function(){
				var siteInfo = require("siteinfo.js");
				app.goto(siteInfo.siteroot + '/h5/#/pages/index/main?aid=3&id=65');
				
				// var that = this;
				// that.loading = true;
				// if(that.box_info.process < 100){
				// 	app.error("您还未完成任务");
				// 	return false;
				// }
				// app.post('ApiMy/memberLevelActivate', {}, function (res) {
				// 	that.loading = false;
				// 	if (res.status==0) {
				// 		app.error(res.msg);
				// 	}else{
				// 		app.success(res.msg);
				// 		that.getdata();
				// 	}
				// 	that.loaded();
				// });
			},
			consumeBox:function(){
				var that = this;
				that.loading = true;
				var box_id = that.scorelist[that.swiperIndex]['id'];
				console.log("礼包ID："+box_id);
				if(box_id == 0){
					app.error('请选择消费礼包');
					that.loading = false;
					return false;
				}
				if(that.name == ''){
					app.error('请填写姓名');
					that.loading = false;
					return false;
				}
				if(that.tel == ''){
					app.error('请填写电话');
					that.loading = false;
					return false;
				}
				if(that.address == ''){
					app.error('请填写正确收货地址');
					that.loading = false;
					return false;
				}
				app.post('ApiMy/consumeScoreBox', {box_id:box_id,name:that.name,tel:that.tel,address:that.address}, function (res) {
					that.loading = false;
					if (res.status==0) {
						app.error(res.msg);
					}else{
						 app.success(res.msg);
						 app.goto('/pages/pay/pay?id='+res.payorderid);
					}
					that.loaded();
				});
			},
			
		}
	}
</script>

<style lang="scss">
	$main-color:#872AFD;
	$text-color:#999999;
	page{
		background-color: #EFEFEF;
	}
.flex-item{
	flex: 1;
	text-align: center;
	padding: 30upx 0;
	text{
		padding: 20upx 0;
	}
}
.flex-1{
	flex: 1;
}
.boxs{
	border-radius: 10upx 10upx;
	align-items: center;
	background: linear-gradient(130deg, #646464 0%, #3C3C3B 100%);
}
.tags{
	
	width: 150upx;

	height: 40upx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #FEEED6 0%, #FDDFBA 100%);
	border-radius: 50upx 50upx;
	color: #7A4802;
	font-size: 24upx;
	margin-top: 20upx;
}
.pdd{
	padding: 30upx 30upx;
}
.bg1{
	background-color: #fff;
}
.bg2{
	background-color: #f7f7f7;
}
.bg3{
	background-color: #F6F8F9;
}
.main-bg{background-color: $main-color;}
.main-color{color: $main-color;}
.text-color{color: $text-color;}
.white-color{color: #fff;}
.color1{
	color: #7A4802;
}
.border{
	position: absolute;
	width: 36upx;
	height: 6upx;
	border-radius: 30upx 30upx;
	background-color: $main-color;
	bottom: 14upx;
	left: 25%;
	transform: translateX(-50%);
	transition: all 0.2s;
}
.border-right{
	left: 75%;
}
.u-swiper__wrapper{
	height: 400upx;
	margin: 30upx 0;
}
.swiper-item-boxs{
	background: linear-gradient(180deg, #FEEFD7 0%, #FDDEB9 100%);
	height: 100%;
	border-radius: 30upx 30upx;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.scale{
	transform: scale(0.8);
	background: #F7F7F7;
}
</style>
